<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">

        <input type="checkbox" name="" id="" v-model="checkall" @change="checkAllFn"> 反选按钮

        <ul>
            <li v-for="(item,index) in shopArr">
                <input type="checkbox" :value="index" name="" id="" v-model="arr" @change="changetype"> {{item}}
            </li>
        </ul>

        <div>{{arr}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                shopArr: ['彩电', '冰箱', '电脑'],
                checkall: false,
                arr: []//记录每一个item的选中的状态
            },
            methods: {
                changetype() {
                    console.log(this.arr);
                    // arr的长度和 shopArr的长度相等，表示都选中了
                    if (this.arr.length == this.shopArr.length) {
                        this.checkall = true;
                    } else {
                        this.checkall = false;
                    }
                },
                checkAllFn() {
                //    this.shopArr.forEach((item,index) => {

                //    });
                this.arr=[]
                }
            }
        })
    </script>
</body>

</html>